<template>
  <s-table
    class="userTable"
    ref="table"
    size="default"
    :showHeader="false"
    rowKey="key"
    :columns="columns"
    :data="loadData"
    showPagination="auto"
  >
    <template
      slot="user"
      slot-scope="text, record"
    >
      <img :src="preUrl + record.imageUrl" />
      {{ text }}
      <a-icon :type="record.userSex === 1 ? 'man' : record.userSex === 0 ? 'woman' : '♪'" />
      <span :title="record.userInfo" v-if="record.userInfo !== null">{{ record.userInfo.length > 30 ? record.userInfo.substr(0, 28)+'...' : record.userInfo }}</span>
    </template>
  </s-table>
</template>

<script>
  import { query } from '@/api/basic/user'
  import { STable } from '@/components'
  export default {
    name: 'ListUser',
    components: {
      STable
    },
    data () {
      return {
        // 查询参数
        queryParam: {},
        preUrl: '/api/file/download/image/',
        columns: [
          {
            dataIndex: 'userName',
            customCell: this.goUserInfo,
            scopedSlots: { customRender: 'user' },
            align: 'left'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          // 统一处理查询参数，便于后端表格DTO用固定参数接收
          this.queryParam.userName = this.$route.params.text
          const queryJson = { 'queryParam': JSON.stringify(this.queryParam) }
          return query(Object.assign(parameter, queryJson))
            .then(res => {
              const count = res.data.result.totalCount
              if (this.totalCount === '♪') {
                this.totalCount = count
              }
              this.$emit('ok', count + ' 位用户')
              return res.data.result
            })
        }
      }
    },
    mounted () {
      const tableHead = window.document.getElementById('userTable')
      console.log(tableHead)
    },
    methods: {
      goUserInfo (record) {
        return {
          on: {
            mouseenter: (event) => {
              window.document.getElementsByTagName('body').item(0).style.cursor = 'pointer'
            },
            mouseleave: (event) => {
              window.document.getElementsByTagName('body').item(0).style.cursor = 'default'
            },
            click: (event) => {
              window.document.getElementsByTagName('body').item(0).style.cursor = 'default'
              if (record.userId === this.$store.getters.userInfo.id) {
                this.$router.push({ name: 'selfCenter',
                  params: record })
              } else {
                this.$router.push({ name: 'othersCenter',
                  params: record })
              }
            }
          }
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .userTable {
    ::v-deep .ant-table-thead {
      display: none !important;
    }
    span {
      float: right;
      color: #999999;
      line-height: 80px;
    }
  }
  img {
    width: 80px;
    height: 80px;
    border-radius: 100px;
    margin-right: 30px;
  }
</style>
